<template>
  <VTable ref="tableRef" v-bind="tableOptins">
    <template #form="{ form }">
      <template v-if="activeType == 0">
        <select-personnel
          v-model="form.user_id"
          placeholder="请选择统计人员"
        ></select-personnel>
      </template>
      <VGroup>
        <el-select class="selectClass !w-[100px]" v-model="form.timeRange.type">
          <el-option
            v-for="item in timeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-date-picker
          v-model="form.timeRange.value"
          type="month"
          value-format="YYYY-MM-DD"
          placeholder="请选择月份"
        />
      </VGroup>
    </template>
    <template #toolbar_btns>
      <div class="w-full mt-2">
        <el-tabs v-model="activeDepartment" @tab-change="handleChangeMode">
          <el-tab-pane
            :label="item.label"
            :name="item.name"
            v-for="(item, index) in department_list"
            :key="index"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <VButton
        auth="/goods/statement/design-performance/rebuild"
        type="primary"
        @click="handleModal('afresh')"
        >重新生成绩效
      </VButton>
      <VButton
        auth="/goods/statement/design-performance/export"
        class="ml-auto"
        @click="handleExport"
        >导出</VButton
      >
    </template>
  </VTable>
  <ComModal ref="ComModalRef" :options="options"></ComModal>
  <VLog ref="logRef" class="dialogPublic" :api="getScoreLog" options="taskId"></VLog>
  <LabelModal ref="labelModalRef" :options="options"></LabelModal>
  <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
</template>
<script setup name="StatementInventory-balance" lang="jsx">
import { nextTick, ref, reactive, toRefs } from "vue";
import { queryPerformanceList, getScoreLog } from "../../api/index";
import { getOptions } from "@/api/index";
import VLog from "@/components/VLog";
import ComModal from "../../components/ComModal.vue";
import LabelModal from "../../components/LabelModal.vue";
import { getLastDayNumber } from "@/utils/index.js";
import DerivedCenter from "@/components/DerivedCenter";
import { timeOptions, departmentList } from "../../data.js";
import { ElMessage } from "element-plus";

const data = reactive({
  options: [],
  activeType: 0,
  activeDepartment: "",
  isRefreshTable: true,
  form: {},
  department_list: [],
});
const {
  options,
  activeType,
  isRefreshTable,
  activeDepartment,
  form,
  department_list,
} = toRefs(data);

const tableRef = ref();
const tableOptins = reactive({
  rowConfig: { height: 52 },
  formConfig: {
    data: {
      timeRange: {
        type: "performance_month",
        value: getLastDayNumber(),
        range: false,
      },
      personnelRange: { type: "designer_user", value: [], range: true },
    },
  },
  columns: [],
  proxyConfig: {
    // seq: true,
    props: {
      result: "data",
      total: "total",
    },
    autoLoad: false,
    ajax: {
      query: async ({ page, form }) => {
        if (!activeDepartment.value) {
          ElMessage.error("暂无权限，请申请");
          return;
        }
        const res = await queryPerformanceList({
          ...form,
          ...page,
          mode: activeDepartment.value,
        });
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total,
          });
        });
      },
    },
  },
});

const initColumn = (activeDepartment) => {
  if (activeDepartment == 1) {
    return [
      {
        field: "performance_month",
        title: "绩效月份",
      },
      {
        field: "username",
        title: "绩效人员",
      },
      {
        field: "performance_score",
        title: "图片绩效分",
        slots: {
          header: ({ row }) => {
            return (
              <div class="flex items-center">
                图片绩效分
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="此处统计上传图片时，标记了图片标签的分值"
                  placement="top-start"
                >
                  <svg-icon icon-class="hint_cover2"></svg-icon>
                </el-tooltip>
              </div>
            );
          },
          default: ({ row }) => {
            return <div>{row.performance_score}</div>;
          },
        },
      },
      {
        field: "task_score",
        title: "图片任务分",
        slots: {
          header: ({ row }) => {
            return (
              <div class="flex items-center">
                图片任务分
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="统计任务绩效标签分值"
                  placement="top-start"
                >
                  <svg-icon icon-class="hint_cover2"></svg-icon>
                </el-tooltip>
              </div>
            );
          },
          default: ({ row }) => {
            return <div>{row.task_score}</div>;
          },
        },
      },
      {
        field: "total_score",
        title: "任务完成总分",
        slots: {
          header: ({ row }) => {
            return (
              <div class="flex items-center">
                任务完成总分
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="图片绩效分+图片任务分"
                  placement="top-start"
                >
                  <svg-icon icon-class="hint_cover2"></svg-icon>
                </el-tooltip>
              </div>
            );
          },
          default: ({ row }) => {
            return <div>{row.total_score}</div>;
          },
        },
      },
      {
        field: "average_quality_score",
        title: "质量平均分",
        slots: {
          header: ({ row }) => {
            return (
              <div class="flex items-center">
                质量平均分
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="运营+设计主管评分的平均分"
                  placement="top-start"
                >
                  <svg-icon icon-class="hint_cover2"></svg-icon>
                </el-tooltip>
              </div>
            );
          },
          default: ({ row }) => {
            return <div>{row.average_quality_score}</div>;
          },
        },
      },
      {
        field: "task_completion_rate",
        title: "交付完成率",
        slots: {
          header: ({ row }) => {
            return (
              <div class="flex items-center">
                交付完成率
                <el-tooltip
                  effect="dark"
                  placement="top-start"
                  content="1、统计绩效月份内，在预期完成周期内，提交审核的任务占比；  2、不统计标记为超额任务、类型=非设计任务的数据；"
                >
                  <svg-icon icon-class="hint_cover2"></svg-icon>
                </el-tooltip>
              </div>
            );
          },
          default: ({ row }) => {
            return <div>{row.task_completion_rate}</div>;
          },
        },
      },
    ];
  } else if (activeDepartment == 2 || activeDepartment == 4) {
    return [
      {
        field: "performance_month",
        title: "绩效月份",
      },
      {
        field: "username",
        title: "绩效人员",
      },
      {
        field: "task_score",
        title: "图片任务分",
        slots: {
          header: ({ row }) => {
            return (
              <div class="flex items-center">
                图片任务分
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="统计任务绩效标签分值"
                  placement="top-start"
                >
                  <svg-icon icon-class="hint_cover2"></svg-icon>
                </el-tooltip>
              </div>
            );
          },
          default: ({ row }) => {
            return <div>{row.task_score}</div>;
          },
        },
      },
      {
        field: "average_quality_score",
        title: "质量平均分",
        slots: {
          header: ({ row }) => {
            return (
              <div class="flex items-center">
                质量平均分
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="运营+设计主管评分的平均分"
                  placement="top-start"
                >
                  <svg-icon icon-class="hint_cover2"></svg-icon>
                </el-tooltip>
              </div>
            );
          },
          default: ({ row }) => {
            return <div>{row.average_quality_score}</div>;
          },
        },
      },
      {
        field: "task_completion_rate",
        title: "交付完成率",
        slots: {
          header: ({ row }) => {
            return (
              <div class="flex items-center">
                交付完成率
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="1、统计绩效月份内，在预期完成周期内，提交审核的任务占比；  2、不统计标记为超额任务、类型=非设计任务的数据；"
                  placement="top-start"
                >
                  <svg-icon icon-class="hint_cover2"></svg-icon>
                </el-tooltip>
              </div>
            );
          },
          default: ({ row }) => {
            return <div>{row.task_completion_rate}</div>;
          },
        },
      },
    ];
  } else if (activeDepartment == 3) {
    return [
      {
        field: "performance_month",
        title: "绩效月份",
      },
      {
        field: "username",
        title: "绩效人员",
      },
      {
        field: "performance_score",
        title: "图片绩效分",
        minWidth: 120,
        slots: {
          header: ({ row }) => {
            return (
              <div class="flex items-center">
                图片绩效分
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="此处统计上传图片时，标记了图片标签的分值"
                  placement="top-start"
                >
                  <svg-icon icon-class="hint_cover2"></svg-icon>
                </el-tooltip>
              </div>
            );
          },
          default: ({ row }) => {
            return <div>{row.performance_score}</div>;
          },
        },
      },
      {
        field: "task_score",
        title: "图片任务分",
        minWidth: 120,
        slots: {
          header: ({ row }) => {
            return (
              <div class="flex items-center">
                图片任务分
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="统计任务绩效标签分值"
                  placement="top-start"
                >
                  <svg-icon icon-class="hint_cover2"></svg-icon>
                </el-tooltip>
              </div>
            );
          },
          default: ({ row }) => {
            return <div>{row.task_score}</div>;
          },
        },
      },
      {
        field: "reach_standard_rate",
        title: "任务达标率统计",
        minWidth: 120,
      },
      {
        field: "task_completion_rate",
        title: "交付完成率",
        minWidth: 120,
        slots: {
          header: ({ row }) => {
            return (
              <div class="flex items-center">
                交付完成率
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="1、统计部门分配结束时间在绩效月份内，且提交审核时间<=部门分配结束时间的任务占比；2、不统计标记为超额任务、类型=非设计任务的数据；"
                  placement="top-start"
                >
                  <svg-icon icon-class="hint_cover2"></svg-icon>
                </el-tooltip>
              </div>
            );
          },
          default: ({ row }) => {
            return <div>{row.task_completion_rate}</div>;
          },
        },
      },
      {
        field: "converted_quantity",
        title: "目标套数",
        width: 120,
      },
      {
        field: "incentive_number",
        title: "激励套数",
        width: 120,
      },
    ];
  }
};

const handleChangeMode = () => {
  form.value = tableRef.value.getForm();
  const columns = initColumn(activeDepartment.value);
  tableRef?.value?.$table.loadColumn(columns);
  tableRef?.value?.$table.reloadData([]);
  tableRef?.value.query();
};

// 获取枚举类
const fetchOption = async () => {
  getOptions({
    version: "v1",
    name: [
      "report.ReportModeConfig",
      "assignment.ImagesAssignment",
      "assignment.ImagesTag",
    ],
  }).then((res) => {
    options.value = res.data;
  });
};
fetchOption();

const ComModalRef = ref();
const handleModal = (type) => {
  ComModalRef.value.open(type);
};

const DerivedCenterRef = ref();
const handleExport = () => {
  let condition = tableRef.value.getQueryForm();
  condition.mode = activeDepartment.value;
  DerivedCenterRef.value.open({
    tag_name: "performance-list",
    condition,
  });
};

onMounted(() => {
  department_list.value = departmentList.filter((i) => {
    if ((window.BTN_AUTH || []).includes(i.auth) || !i.auth) {
      return i;
    }
  });
  activeDepartment.value = department_list.value[0]?.name;
  handleChangeMode();
});
</script>
<style scoped>
:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
}

:deep(.vxe-toolbar) {
  padding-top: 10px;
}

:deep(.vx-table__form-content) {
  padding-left: 0;
  padding-right: 0;
}

:deep(.vx-table__content) {
  padding: 0;
}
</style>
